import './index.less';
import React, { PureComponent } from 'react';
import { ResourceManagerProps } from '../ResourceManagerProps';
import { FilterViewBlock } from '../components/FilterViewBlock';
import { MainViewBlock } from './partial/MainViewBlock';

export class TableTemplate extends PureComponent<ResourceManagerProps> {
  handleFilterFormChange = (filterValues: any) => {
    const { onChange, pagination } = this.props;
    // 需要在这里合并数据向外输出，例如分页信息
    onChange && onChange(
      { action: 'filterViewChange' },
      {
        filterValues,
        pagination
      }
    );
  };

  handleTableChange = (pagination: any, filters: any, sorter: any, extra: any) => {
    const { onChange, filterValues } = this.props;
    onChange && onChange(
      { action: extra.action },
      {
        filterValues,
        pagination,
        filters,
        sorter
      }
    );
  }

  handleRowSelectionChange = (selectedRowKeys: [], selectedRows: []) => {
    const { features } = this.props;
    features?.rowSelection?.onChange(selectedRowKeys, selectedRows);
  }

  render() {
    const { filterFields } = this.props;
    const filterFieldsInFilterView = filterFields?.filter(
      (item) => item.position === 'FilterView' || item.position === undefined
    )
    return (
      <div className="tcc-resource tcc-resouce-table">
        {filterFieldsInFilterView && filterFieldsInFilterView?.length > 0 ? (
          <FilterViewBlock
            {...this.props}
            filterFields={filterFieldsInFilterView}
            onFilterFormChange={this.handleFilterFormChange}
          />
        ) : null}
        <div className="tcc-content">
          <MainViewBlock
            {...this.props}
            onTableChange={this.handleTableChange}
            onFilterFormChange={this.handleFilterFormChange}
            onRowSelectionChange={this.handleRowSelectionChange}
          />
        </div>

      </div>
    )
  }


}
